<template>

    <template v-if="user">
        <div class="center">
            <div>
                <img :alt="user.username" class="img" :src="user.avatar ? user.avatar :defaultPicture ">
            </div>
        </div>
        <van-cell title="当前用户" :value="user.username" size="large" />
        <van-cell title="添加标签" is-link to="/tags-edit" />
        <van-cell title="修改信息" is-link to="/user/update" />
        <van-cell title="我创建的队伍" is-link to="/user/create" />
        <van-cell title="我加入的队伍" is-link to="/user/join" />
        <van-cell title="我发的帖子" is-link @click="doPosterByMe(user.id)"/>
        <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit" @click="doLogout">
                退出登录
            </van-button>
        </div>
    </template>

</template>

<script setup lang="ts">
    import {useRouter} from "vue-router"
    import {onMounted,ref} from 'vue'
    import myAxois from "../plugin/MyAxios";
    import {showFailToast, showSuccessToast} from "vant";
    import {getCurrentUser} from "../service/user";
    import {defaultPicture} from '../common/userCommand';


    const router = useRouter();
    //注销功能
    const doLogout = async () =>{
        const res = await myAxois.post("/user/logout");
        if(res.data.code === 0){
            router.replace("/user/login");
            // sessionStorage.clean();
        }else{
            showFailToast("注销失败")
        }
    }

    const user = ref()
    onMounted(async () => {
        //获取当前登录的用户信息
        const res = await getCurrentUser();
        if(res.data.code === 0 && res.data.data){
            showSuccessToast("获取当前用户成功！")
            user.value = res.data.data;
        }else{
            showFailToast("获取当前用户失败!")
        }
    })

    const doPosterByMe = (id:number) =>{
        router.push({
            path:"/poster-me",
            query:{
                id
            }
        })
    }

</script>

<style scoped>
.img{
    box-shadow: 0 0 14px rgba(0, 0, 0, 0.5);
    border-radius: 20%;
    height: 135px;
    width: 135px;
}
.center{
    margin-top: 10px;
    display: flex;
    justify-content: center;
}
</style>